import React, { PureComponent } from 'react';
import { Card, Avatar, Icon, Tag, List, Row, Col } from 'antd';
import Link from 'umi/link';

import styles from '../../styles.less'


class deviceCard extends PureComponent {

    render() {
        const { Meta } = Card;
        const {deviceName, deviceSrc }=this.props;
        return (
            <Card bordered={false}
                size="small"
                style={{ width: 200 }}
            >
               
               <Row gutter={24} style={{ marginBottom: 16 }}>
                        <Col sm={14} xs={14} md={14}>
                        <Link to="/iiot_monitor/device">
                            <img
                                alt="example"
                                src={deviceSrc}
                                style={{ height: '60px', width: '100px',paddingLeft:'12px' }}
                            />
                             </Link>
                        </Col>
                       
                        <Col sm={10} xs={10} md={10}>
                            <span className={styles.spanStyle} style={{ marginBottom: 12, fontSize: '14px',textAlign:'left' }} >{deviceName}</span>
                            <Tag color="#13C2C2"> &nbsp;开启&nbsp;</Tag>
                        </Col>
                    </Row>
                    <Row gutter={24} style={{ marginBottom: 0 ,paddingLeft:'12px' }}>
                        <Col sm={12} xs={12} md={12}>
                            <span className={styles.spanStyle}  style={{backgroundColor:'#13C2C2'}}>1#泵 开启</span>
                        </Col>
                        <Col sm={12} xs={12} md={12}>
                            <span className={styles.spanStyle}  style={{backgroundColor:'#BDC3C7'}}>2#泵 关闭</span>
                        </Col>
                        <Col sm={12} xs={12} md={12}>
                            <span className={styles.spanStyle}  style={{backgroundColor:'#BDC3C7'}}>3#泵 关闭</span>
                        </Col>
                         
                    </Row>
               

            </Card>
        );
    }
}

export default deviceCard;
